<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style>
			#div1 input {
				background: white;
			}
			
			#div1 input.active {
				background: yellow;
			}
			
			#div1 div {
				padding: 10px 10px;
				width: 203px;
				height: 150px;
				background: #ccc;
				display: none;
			}
			
			#div1 div.active {
				display: block;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<input id="btn" type="button" value="前端开发" class="active" />
			<input id="btn" type="button" value="Android开发" />
			<input id="btn" type="button" value="ui设计" />
			<div class="active">html5\css\javaScript\js框架</div>
			<div>java\android原生\混合</div>
			<div>ps\基础</div>
		</div>
		<script>
			//获取元素
			var dom = document.getElementById('div1');
			//获取按钮
			var btns = dom.getElementsByTagName('input');
			//获取div框
			var divs = dom.getElementsByTagName('div');
			//给3个按钮添加点击事件（函数）
			for(var i = 0; i < btns.length; i++) {
				btns[i].onclick = function() {
					//点击某个按钮：改变按钮背景色；下面div框架是否显示
					//1、所有按钮背景色白色；当前点击的按钮背景色黄色
					for(var j = 0; j < btns.length; j++) {
						btns[j].style.background = 'white';
					}
					this.style.background = 'yellow';
					//2、当前框显示其他框隐藏
					for(var k = 0; k < divs.length; k++) {
						if(this == btns[k]) {
							divs[k].style.display = 'block';
						} else {
							divs[k].style.display = 'none';
						}
					}
				}
			}
		</script>
	</body>

</html>